<template>
  <div>
    <!-- <div class="demo-input-suffix">
      属性方式：
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="input1"
      >
      </el-input>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2"
      >
      </el-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式：
      <el-input placeholder="请选择日期" v-model="input3">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input placeholder="请输入内容" v-model="input4">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div> -->

    <!-- <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="(item, index) in arr"
        :key="index"
        :label="item.label"
        :value="index"
      >
      </el-option>


    </el-select> -->
    <!-- <div class="block">
      <span class="demonstration">默认 click 触发子菜单</span>
      <el-cascader
        v-model="value"
        :options="list"
        @change="handleChange"
      ></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader
        v-model="value"
        :options="list"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
      ></el-cascader>
    </div> -->

    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="选择日期时间"
      >
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value2"
        type="datetime"
        placeholder="选择日期时间"
        align="right"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">设置默认时间</span>
      <el-date-picker
        v-model="value3"
        type="datetime"
        placeholder="选择日期时间"
        default-time="12:00:00"
      >
      </el-date-picker>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification,
} from "element-ui";
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
new Vue().$mount("#app");
export default {
  data() {
    return {
      //   input1: "",
      //   input2: "",
      //   input3: "",
      //   input4: "",
      //   arr: [
      //     {
      //       value: "选项1",
      //       label: "唐三藏",
      //     },
      //     {
      //       value: "选项2",
      //       label: "猪八戒",
      //     },
      //     {
      //       value: "选项3",
      //       label: "沙和尚",
      //     },
      //     {
      //       value: "选项4",
      //       label: "白龙马",
      //     },
      //     {
      //       value: "选项5",
      //       label: "孙悟空",
      //     },
      //   ],
      //   value: "",
      //   value: [],
      //   list: [
      //     {
      //       name: "张三",
      //       value: "zhangsan",
      //       users: [
      //         {
      //           name: "李四",
      //           value: "lisi",
      //           users: [{ name: "王五", value: "wangwu" }],
      //         },
      //       ],
      //     },
      //     {
      //       name: "张三2",
      //       value: "zhangsan2",
      //       users: [
      //         {
      //           name: "李四2",
      //           value: "lisi2",
      //           users: [{ name: "王五2", value: "wangwu2" }],
      //         },
      //       ],
      //     },
      //   ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
        value1: '',
        value2: '',
        value3: ''
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    /* 递归方法 */
    changgeFrom(arr) {
      arr.forEach((item) => {
        item.value = item.name;
        item.label = item.name;
        item.children = item.users;
        if (item.users instanceof Array) {
          this.changgeFrom(item.users);
        }
      });
      return arr;
    },
  },
  mounted() {
      
    /* JSON.parse 返回之前对所得到的对象 JSON.parse 对象或值转换为 JSON 字符串 */
    // var newJsonParam = JSON.parse(
    //   JSON.stringify(this.list).replaceAll("name", "label")
    // );
    // newJsonParam = JSON.parse(
    //   JSON.stringify(newJsonParam).replaceAll("users", "children")
    // );
    // this.list = newJsonParam;
    // console.log(this.options);
    // console.log(this.list);

    // let arr = function (oldVal, newVal, json) {
    //   for (var i in json) {
    //     for (var j in json[i]) {
    //       if (j == oldVal) {
    //         json[i][newVal] = json[i][j]; //修改属性名为newVal
    //         delete json[i][oldVal]; //删除oldVal
    //       }
    //     }
    //   }
    // };
  },
};
</script>
